<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股票蜡烛图</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    #candlestickChart {
      width: 100%;
      height: 500px;
    }
  </style>
</head>

<body>
  <h1>股票蜡烛图</h1>
  <div id="candlestickChart"></div>

  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.8/dist/echarts.min.js"></script>

  <script>
    // 等待页面加载完成后初始化图表
    document.addEventListener('DOMContentLoaded', function () {
      // 模拟股票数据 (日期, 开盘价, 最高价, 最低价, 收盘价)
      const stockData = [
        ['2023-01-01', 100, 105, 95, 102],
        ['2023-01-02', 102, 108, 101, 104],
        ['2023-01-03', 104, 110, 103, 107],
        ['2023-01-04', 107, 112, 106, 109],
        ['2023-01-05', 109, 115, 108, 113],
      ];

      // 转换数据为 ECharts 支持的格式
      const formattedData = stockData.map(item => [
        item[0],  // 时间
        item[1],  // 开盘价
        item[2],  // 最高价
        item[3],  // 最低价
        item[4],  // 收盘价
      ]);

      // 初始化 ECharts 实例
      const chart = echarts.init(document.getElementById('candlestickChart'));

      // 配置项
      const option = {
        title: {
          text: '股票蜡烛图',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        xAxis: {
          type: 'category',
          data: stockData.map(item => item[0]), // 日期作为 X 轴数据
          boundaryGap: false,
          axisLabel: {
            formatter: '{value}',
          },
        },
        yAxis: {
          type: 'value',
          scale: true,
          axisLabel: {
            formatter: '{value}',
          },
        },
        series: [{
          name: '蜡烛图',
          type: 'candlestick',
          data: formattedData, // 股票数据
          itemStyle: {
            color: 'green', // 上涨蜡烛颜色
            color0: 'red', // 下跌蜡烛颜色
            borderColor: 'green', // 上涨边框颜色
            borderColor0: 'red', // 下跌边框颜色
          },
          tooltip: {
            formatter: function (params) {
              const date = params.value[0];
              const open = params.value[1];
              const close = params.value[4];
              const highest = params.value[2];
              const lowest = params.value[3];
              return `
                                日期: ${date}<br/>
                                开盘价: ${open}<br/>
                                最高价: ${highest}<br/>
                                最低价: ${lowest}<br/>
                                收盘价: ${close}
                            `;
            }
          },
        }]
      };

      // 使用配置项设置图表
      chart.setOption(option);
    });
  </script>
</body>

</html>